<template>
  <view class="head-view">
  	<view class="head-view-avatar">
  		
  	</view>
	<view class="head-view-info">
		<text style="line-height: 50rpx;">名字名字</text>
	</view>
  </view>
  <scroll-view scroll-y="true" class="info-view">
  	<view v-for="(item,index) in showList" :key="index" class="info-view-item" @click="itemClick(item.type)">
  		<text style="line-height: 100rpx;">{{item.name}}</text>
  	</view>
  </scroll-view>
</template>

<script>
import orderInfoAlert from '@/components/orderInfoAlert.vue';

export default {
  data () {
	  return {
		 showList: [
			 {
				 name: '我的订单',
				 type: 3
			 },
			 {
				 name: '地址管理',
				 type: 1
			 },
			 {
			 	 name: '关于我们',
				 type: 2
			 }
		 ]
	  }
  },
  methods: {
	  itemClick(type) {
		  if(type==1){
			  uni.navigateTo({
			  	url:'/pages/mine/address'
			  })
		  }else if(type==2){
			  uni.navigateTo({
			  	url:'/pages/mine/introduce'
			  })
		  }else if(type==3){
			  uni.navigateTo({
			  	url:'/pages/order/order'
			  })
		  }
	  }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  // 总容器高度撑满屏幕
  height: 100%;
  // 使容器内元素使用flex布局
  display: flex;
  flex-direction: column;
}

.head-view {
	height: 300rpx;
	width: calc(100% - 55rpx);
	background-color: crimson;
	display: flex;
	flex-direction: row;
	padding: 50rpx 30rpx 50rpx 30rpx;
	align-items: center;
	
	.head-view-avatar {
		height: 150rpx;
		width: 150rpx;
		background-color: white;
		border-radius: 75rpx;
	}
	
	.head-view-info {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		height: 50rpx;
		margin-left: 20rpx;
		font-size: 40rpx;
		color: white;
		font-weight: bold;
	}
}

.info-view {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	padding: 20rpx;
	color: black;
	width: calc(100% - 40rpx);
	font-size: 30rpx;
	
	.info-view-item {
		height: 100rpx;
		width: calc(100% - 60rpx);
		background-color: white;
		padding: 0rpx 30rpx 0rpx 30rpx;
		margin-bottom: 10rpx;
	}
}


</style>